<template>
  <div class="twoElements">
    <el-tabs v-model="activeName" stretch>
      <el-tab-pane label="号码-证件" name="first">
        <div class="element">
          <el-form
            :model="numberIDData"
            status-icon
            :rules="numberIDRules"
            ref="numberID"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="手机：" prop="mdn">
              <el-input
                v-model.trim="numberIDData.mdn"
                placeholder="请输入手机号"
                autocomplete="off"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item label="证件号：" prop="idNo">
              <el-input
                v-model.trim="numberIDData.idNo"
                placeholder="请输入证件号"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitNumberID('numberID')"
                >核验</el-button
              >
              <el-button @click="resetNumberID('numberID')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="号码-姓名" name="second">
        <div class="element">
          <el-form
            :model="numberNameData"
            status-icon
            :rules="numberNameRules"
            ref="numberName"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="手机：" prop="mdn">
              <el-input
                v-model.trim="numberNameData.mdn"
                placeholder="请输入手机号"
                autocomplete="off"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item label="姓名：" prop="name">
              <el-input
                v-model.trim="numberNameData.name"
                placeholder="请输入姓名"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitNumberName('numberName')"
                >核验</el-button
              >
              <el-button @click="resetNumberName('numberName')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { checkNumberID, checkNumberName } from "@/api/elements";
import debounce from "lodash.debounce";
import {
  isValidPhoneNumber,
  isValidNameRegex,
  isIdCardRegex,
} from "@/utils/validate";
export default {
  data() {
    // 手机号验证
    var validateMdn = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!isValidPhoneNumber(value)) {
        callback(new Error("请输入合法的手机号"));
      } else {
        callback();
      }
    };
    // 姓名验证
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入姓名"));
      } else if (!isValidNameRegex(value)) {
        callback(new Error("请输入合法的姓名"));
      } else {
        callback();
      }
    };
    // 身份证号验证
    var checkIdNo = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入证件号"));
      } else if (!isIdCardRegex(value)) {
        callback(new Error("请输入合法的证件号"));
      } else {
        callback();
      }
    };
    return {
      activeName: "first",
      // 号码-证件
      numberIDData: {
        mdn: "",
        idNo: "",
      },
      numberIDRules: {
        mdn: [{ validator: validateMdn, trigger: "blur" }],
        idNo: [{ validator: checkIdNo, trigger: "blur" }],
      },
      // 号码-姓名
      numberNameData: {
        mdn: "",
        name: "",
      },
      numberNameRules: {
        mdn: [{ validator: validateMdn, trigger: "blur" }],
        name: [{ validator: validateName, trigger: "blur" }],
      },
    };
  },
  methods: {
    // 号码证件提交
    submitNumberID: debounce(function (numberID) {
      this.$refs[numberID].validate(async (valid) => {
        if (valid) {
          let res = await checkNumberID(this.numberIDData);
          // let res = { time: 123, code: 200, message: "检测成功" };
          if (res.code === 200) {
            this.$alert(`检测时间：${res.time}<br>${res.message}`, "检测结果", {
              confirmButtonText: "确定",
              dangerouslyUseHTMLString: true,
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }, 3000),
    // 重置信息
    resetNumberID(numberID) {
      this.$refs[numberID].resetFields();
    },
    // 号码姓名提交
    submitNumberName: debounce(function (numberName) {
      this.$refs[numberName].validate(async (valid) => {
        if (valid) {
          let res = await checkNumberName(this.numberNameData);
          // let res = { time: 123, code: 200, message: "检测成功" };
          if (res.code === 200) {
            this.$alert(`检测时间：${res.time}<br>${res.message}`, "检测结果", {
              confirmButtonText: "确定",
              dangerouslyUseHTMLString: true,
            });
          }
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    }, 3000),
    // 重置信息
    resetNumberName(numberName) {
      this.$refs[numberName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.twoElements {
  .element {
    width: 500px;
    margin: 0 auto;
    margin-top: 50px;
  }
}
::v-deep .el-tabs__header{
  width:500px;
  margin: 25px auto 15px;
}
</style>
